import React, { memo, useEffect } from "react";
import { useSelector, useDispatch, shallowEqual } from "react-redux";
import "./index.scss";

import playActions from "store/action/play";
import WYThemeHeaderPlayer from "components/theme-header-player";

const WYPlayerRelevant = memo(function (props) {
  const dispatch = useDispatch();
  const simiSongList = useSelector(
    (state) => state.getIn(["play", "simiSongList"]),
    shallowEqual
  );
  useEffect(() => {
    dispatch(playActions.getSimiSongList());
  }, [dispatch]);

  return (
    <div className="player-relevant">
      <WYThemeHeaderPlayer title="网易云音乐多端下载" />
      {simiSongList.length > 0 &&
        simiSongList.map((item, index) => (
          <div className="song-item">
            <div className="info">
              <div className="title">
                <a href="#/">{item.name}</a>
              </div>
              <div className="artist">
                <a href="#/">{item.artists[0].name}</a>
              </div>
            </div>
            <div className="operate">
              <button className="item sprite_icon3 play "></button>
              <button className="item sprite_icon3 add "></button>
            </div>
          </div>
        ))}
    </div>
  );
});

export default WYPlayerRelevant;
